<div id="modals">
    <div class="modal fade" id="modal-add" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog" style="width:400px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">添加</h4>
                </div>
                <div class="modal-body">
                    <form action="javascript:;" method="post">
                        <table class="table table-striped table-bordered ">
                            <tr>
                                <th>分公司名称</th>
                                <td><input type="text" class="form-control input-medium" name="branchName" max="32" value=""></td>
                            </tr>
                            <tr>
                                <th>后台账号</th>
                                <td><input type="text" class="form-control input-medium" name="sysUname" max="32" value=""></td>
                            </tr>
                            <tr>
                                <th>后台密码</th>
                                <td>
                                    <input type="text" class="form-control input-medium" name="pwd" />
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn dark green btn-save radius6"><i class="fa fa-save"></i> 添加</button>
                    <button type="button" class="btn dark btn-outline radius6" data-dismiss="modal"><i  class="fa fa-close"></i> 关闭 </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div class="modal fade" id="modal-edit" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog" style="width:400px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">修改</h4>
                </div>
                <div class="modal-body">
                    <form action="javascript:;" method="post">
                        <input type="hidden" name="id" />
                        <input type="hidden" name="sysUserId" />
                        <table class="table table-striped table-bordered ">
                            <tr>
                                <th>分公司名称</th>
                                <td><input type="text" class="form-control input-medium" name="branchName" max="32" value=""></td>
                            </tr>
                            <tr>
                                <th>后台账号</th>
                                <td><input type="text" class="form-control input-medium" disabled readonly name="sysUname" max="32"
                                        value=""></td>
                            </tr>
                            <tr>
                                <th>密码重置</th>
                                <td>
                                    <input type="text" class="form-control input-medium" name="pwd" />
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn dark green btn-save radius6"><i class="fa fa-check"></i> 保存  </button>
                    <button type="button" class="btn dark btn-outline radius6" data-dismiss="modal"><i  class="fa fa-close"></i> 关闭 </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</div>
<div class="row">
    <div class="top-handle-btn">
        <form id="search-form" action="javascript:;">
            每页显示：<input name="pageSize" class="form-control input-small inline" type="number" min="2" max="50" value="10"
            />
            <input type="text" placeholder="输入名称查询" class="form-control input-inline" name="branchName" />
            <button class="btn purple right search radius6"><i class="fa fa-search"></i> 查询</button>
            <a class='btn green radius6' data-toggle='modal' href='#modal-add'><i class="fa fa-plus"></i> 添加</a>
        </form>
    </div>
</div>
<div class="row">
    <table id="data-table" class="table table-striped table-bordered table-hover" width="100%">
        <thead>
            <tr>
                <th style="width: 50px;">编号</th>
                <th>分公司名称</th>
                <th>加盟店数量</th>
                <th>后台账号</th>
                <th>上线状态</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
        </tfoot>
    </table>
</div>

<script type="text/javascript">
    var resourceUrl = "/branch";
    $(function () {
        DataTable.init({
            url: resourceUrl, //ajax请求url
            tableName: "data-table", //数据表table id
            paramsFormName: "search-form", //查询参数form id
            modal: "modals", //模态框div
            columns: [ //列对应的字段数组，注意顺序
                {
                    data: "branchNo"
                },
                {
                    data: "branchName"
                },
                {
                    data: "liteCount"
                },
                {
                    data: "sysUname"
                },
                {
                    data: "isEnabled",
                    convert: "1=> <input type='checkbox' class='ck-sw' data-size='small' checked >" +
                        "|0=><input class='ck-sw' type='checkbox' data-size='small'>"
                },
                {
                    data: "sysUserId",
                    visible: false
                }
            ],
            options: [ //操作区域(id)
                {
                    icon: 'fa fa-edit',
                    name: "编辑",
                    color: "green",
                    option: "modal-edit",
                    edit: true,
                    url: resourceUrl + "/{id}",
                    editMain: true,
                },
                {
                    icon: 'fa fa-remove',
                    name: "删除",
                    color: "red",
                    del: resourceUrl,
                },
            ],
            handles: {
                insert: [{
                    url: resourceUrl,
                    modalId: "modal-add"
                }, ],
            },
            endFn: "registerSwitchClick"
        });
    });



    function setShow(obj, v) {
        var id = $(obj).parents("tr").attr("data-id");
        bootbox.confirm(v?"上线该分公司?":"分公司下线后，该用户无法登陆后台",
            function (result) {
                if (result) {
                    Shinez.put(resourceUrl + "/" + id + "/enabled", {
                        isEnabled: v,
                        id: id
                    }, function (ret) {
                        if (ret.status == 0) {
                            Shinez.tip("success", "操作成功");
                            obj.bootstrapSwitch("state", v, true);
                        } else {
                            Shinez.showTip("error", ret.info);
                        }
                    });
                }
            });
        //        var isShow = $(obj).parents("tr").find("td[data-name=isShow]").attr("data-value");

    }


    function registerSwitchClick() {
        $('.ck-sw').on('switchChange.bootstrapSwitch', function (e, state) {
            var $this = $(this);
            $this.bootstrapSwitch('state', !state, true);
            setShow($this, state);
        });
    }
</script>